<template>
  <div id="app">
    <MyHeader title="购物车" />
    <MyGoods v-for="item in list" :key="item.id" :obj="item" />
    <MyFooter :arr="list"/>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'
export default {
  data () {
    return {
      list: []
    }
  },

  created () {
    this.getCar()
  },

  components:{
    MyHeader,
    MyGoods,
    MyFooter
  },

  methods: {
    // 获取购物车数据
    async getCar () {
      const res = await this.$axios({
        url: 'https://www.escook.cn/api/cart'
      })
      // 将数据保存到 data，这样模板才能使用 data 里面的数据
      this.list = res.data.list
    }
  }
}
</script>

<style scoped>
  #app {
    padding: 45px 0;
  }
</style>
